<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>加载动画集合</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 80px;
        background: #1a1a1a;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        padding: 40px;
      }

      .spinner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }

      .spinner-label {
        color: white;
        font-size: 16px;
        font-weight: 500;
      }

      /* Spinner 1 - 旋转圆环 */
      .spinner-1 {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(255, 255, 255, 0.1);
        border-top-color: #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Spinner 2 - 点状加载 */
      .spinner-2 {
        display: flex;
        gap: 8px;
      }

      .spinner-2 span {
        width: 12px;
        height: 12px;
        background: #667eea;
        border-radius: 50%;
        animation: bounce 1.4s ease-in-out infinite;
      }

      .spinner-2 span:nth-child(1) { animation-delay: 0s; }
      .spinner-2 span:nth-child(2) { animation-delay: 0.2s; }
      .spinner-2 span:nth-child(3) { animation-delay: 0.4s; }

      @keyframes bounce {
        0%, 80%, 100% {
          transform: scale(0);
        }
        40% {
          transform: scale(1);
        }
      }

      /* Spinner 3 - 脉冲效果 */
      .spinner-3 {
        width: 50px;
        height: 50px;
        background: #667eea;
        border-radius: 50%;
        animation: pulse 1.5s ease-in-out infinite;
      }

      @keyframes pulse {
        0%, 100% {
          transform: scale(0);
          opacity: 1;
        }
        50% {
          transform: scale(1);
          opacity: 0.5;
        }
      }

      /* Spinner 4 - 波浪效果 */
      .spinner-4 {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .spinner-4 span {
        width: 8px;
        height: 40px;
        background: #667eea;
        border-radius: 4px;
        animation: wave 1.2s ease-in-out infinite;
      }

      .spinner-4 span:nth-child(1) { animation-delay: 0s; }
      .spinner-4 span:nth-child(2) { animation-delay: 0.1s; }
      .spinner-4 span:nth-child(3) { animation-delay: 0.2s; }
      .spinner-4 span:nth-child(4) { animation-delay: 0.3s; }
      .spinner-4 span:nth-child(5) { animation-delay: 0.4s; }

      @keyframes wave {
        0%, 40%, 100% {
          transform: scaleY(0.4);
        }
        20% {
          transform: scaleY(1);
        }
      }

      /* Spinner 5 - 旋转方块 */
      .spinner-5 {
        width: 50px;
        height: 50px;
        position: relative;
      }

      .spinner-5 span {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #667eea;
        animation: rotate-square 1.2s infinite ease-in-out;
      }

      .spinner-5 span:nth-child(1) {
        top: 0;
        left: 0;
        animation-delay: 0s;
      }

      .spinner-5 span:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: 0.3s;
      }

      .spinner-5 span:nth-child(3) {
        bottom: 0;
        right: 0;
        animation-delay: 0.6s;
      }

      .spinner-5 span:nth-child(4) {
        bottom: 0;
        left: 0;
        animation-delay: 0.9s;
      }

      @keyframes rotate-square {
        0%, 100% {
          transform: rotate(0deg);
        }
        25% {
          transform: rotate(90deg);
        }
        50% {
          transform: rotate(180deg);
        }
        75% {
          transform: rotate(270deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="spinner-container">
      <div class="spinner-1"></div>
      <div class="spinner-label">旋转圆环</div>
    </div>

    <div class="spinner-container">
      <div class="spinner-2">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="spinner-label">点状加载</div>
    </div>

    <div class="spinner-container">
      <div class="spinner-3"></div>
      <div class="spinner-label">脉冲效果</div>
    </div>

    <div class="spinner-container">
      <div class="spinner-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="spinner-label">波浪效果</div>
    </div>

    <div class="spinner-container">
      <div class="spinner-5">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="spinner-label">旋转方块</div>
    </div>
  </body>
</html>

